<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in" v-loading="loading"
         element-loading-text="加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.4)">
      <div class="data-header">
        <div class="data-header-title">
          全园发育数据一览表
        </div>
        <div class="data-header-line">
          <div style="flex: 1;text-align: right;">
            <el-button type="primary" @click="reserFn" plain size="small">刷新数据</el-button>
          </div>
        </div>
      </div>
      <child-growth-statistics :data="growthData"></child-growth-statistics>
    </div>
  </div>
</template>

<script>
import showNotList from "./compontents/showNotList";
import ChildGrowthStatistics from "./compontents/ChildGrowthStatistics";

export default {
  components: {
    showNotList,
    ChildGrowthStatistics
  },
  data() {
    return {
      tableStripe: true,
      tableBorder: true,
      height: [],
      weight: [],
      ranking: 'morningCheck',
      studentNumber: 0,
      countNumber: 0,
      is_tearch: false,
      loopNumber: 0,
      section_name: '班级',
      showlistvisible: false,
      flag: true,
      loading: true,
      growthData: []
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    async InitFn() {
      let n = this;
      try {
        let data = await this.$post(this.api.Developmental.data.index, {});
        console.log(data);
        if (data) {
          this.loopNumber = 6;
          console.log('展示数据');
          this.studentNumber = data.student;
          this.countNumber = data.count;

          // 处理新的数据结构
          this.growthData = this.transformData(data.data); // 注意这里使用 data.data
          n.loading = false; // 关闭加载状态
        } else {
          this.is_tearch = true;
          this.classInitFn();
          n.loading = false; // 如果没有数据也关闭加载状态
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        n.loading = false; // 如果请求失败也关闭加载状态
      }
    },
    transformData(data) {
      return data.map((item,index) => ({
        age: `${index}岁-`,
        student_number: item.student_number,
        growth_number: item.growth_number,
        height1: item.height1,
        weight1: item.weight1,
        height_rebate1: item.height_rebate1,
        weight_rebate1: item.weight_rebate1,
        height2: item.height2,
        weight2: item.weight2,
        height_rebate2: item.height_rebate2,
        weight_rebate2: item.weight_rebate2,
        height3: item.height3,
        weight3: item.weight3,
        height_rebate3: item.height_rebate3,
        weight_rebate3: item.weight_rebate3,
        height4: item.height4,
        weight4: item.weight4,
        height_rebate4: item.height_rebate4,
        weight_rebate4: item.weight_rebate4,
        height5: item.height5,
        weight5: item.weight5,
        height_rebate5: item.height_rebate5,
        weight_rebate5: item.weight_rebate5,
        height6: item.height6,
        weight6: item.weight6,
        height_rebate6: item.height_rebate6,
        weight_rebate6: item.weight_rebate6
      }));
    },
    reserFn() {
      if (this.flag) {
        this.flag = false
        this.loading = true
        this.InitFn()
      }
    }
  }
}
</script>

<style scoped>
.data-header-title{
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
</style>
